<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的后台管理页面&nbsp;&nbsp;</title>
	<link rel="stylesheet" href="CSS/common3.css" />
	<style>
		.a{
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		padding: 10px;
		}
		.hide{
		display: none;
		}

		.return_top{
			display: none;
			height: 123px;
			width: 123px;
			background-image: url("return_top.png");
			background-size: cover;
			position: fixed;
			bottom: 10px;
			right: 30px;
		}
		
	</style>

	
</head>
<body>	

	<!--导航栏如下-->
	<div class="pg-header">
		<h1 class="left" style="margin: 0 20px;font-size: 30px;">蓝官网</h1>
		
		<a class="left shuxian" style="margin: 0 20px;font-size: 20px;text-decoration: none;line-height: 50px;" href="资产列表.html">资产列表</a>
		<a class="left " style="margin: 0 20px;font-size: 20px;text-decoration: none;line-height: 50px;" href="配置管理.html">配置管理</a>
	</div>

	<div class="pg-body">
		<div class="menu">
			<div class="a" style="color:rgb(37, 145, 237);">CMDB功能</div>
			
			<div>
				<div  onclick="change(this);" style="cursor:pointer;background-color:red;">资产管理</div>
				<div class="content2" style="margin-left:50px;margin-top:10px;">
					<div>资产概要</div>
					<div>资产列表</div>		
					<div>资产变更</div>						
				</div>
			</div>
			<div>
				<div onclick="change(this);" style="cursor:pointer;background-color:red;">用户中心</div>			
				<div class="content2 hide" style="margin-left:50px;margin-top:10px;">
					<div>用户信息</div>
					<div>密码修改</div>		
					<div>手机修改</div>						
				</div>
			</div>

		</div>
		<div class="content">
			需要美化一下搜索框-比如固定住，。			
			<div id="content" style="height:1000px;">
			<!--<input type="button" id="bax" onclick="GoTop();" style="position:fixed;right:30px;bottom:30px;" value="返回顶部"/>-->
			<input type="button" onclick="GoTop()" style="position:fixed;right:30px;bottom:30px;" value="返回顶部"/>

				<!--下面这行是搜索框 -->
				<input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();' />

				<h1 style="color:red;">asdf</h1>
			</div>
		</div>
		<!--右下返回顶部效果-->
		<div class="return_top">

		</div>
		
	</div>
	

	
	
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript">
//最新返回顶部
$(function(){
	$(".content").scroll(function(){
		console.log("123");
       if($(".content").scrollTop()>300){
           $(".return_top").fadeIn(800);
       }else{
           $(".return_top").fadeOut(800);
       }
    });
    $(".return_top").click(function(){
        $('.content,html').animate({scrollTop:0},500);
        return false;

    });
})

function change(arg){
	$(arg).next().removeClass('hide');
	$(arg).parent().siblings().find('.content2').addClass('hide');
}

//下面是搜索框
function Enter(){
	var id=document.getElementById("tip")
	id.className = 'black';
	if(id.value=='请输入关键字'||id.value.trim()==''){
		id.value = ''
	}
}
function Leave(){
	var id=document.getElementById("tip")
	var val = id.value;
	if(val.length==0||id.value.trim()==''){
		id.value = '请输入关键字'
		id.className = 'gray';
	}else{
		id.className = 'black';
	}
}




//跑马灯如下
function Go(){
	var content = document.title;
	var firstChar = content.charAt(0)
	var sub = content.substring(1,content.length)
	document.title = sub + firstChar;
}
setInterval('Go()',1000);
</script>
</body>
</html>